<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding:16px;margin:10px;0px;" :gutter="50">
      <el-tabs type="border-card" v-model="activeTab"  @tab-click="handleTabClick">
        <el-tab-pane label="设备信息" name="tab1">
          <div>
            <el-row>
            <div class="top">
                <p class="title">设备基本信息</p>
                <el-button type="primary" @click="$router.go(-1)">返回</el-button>
            </div>
              <el-descriptions  class="margin-top" :column="3"  border>
                <el-descriptions-item label="所在分区">{{ Moder.PrimArea }}/{{ Moder.SecondArea }}</el-descriptions-item>
                <el-descriptions-item label="校区名称">{{ Moder.SchoolName }}</el-descriptions-item>
                <el-descriptions-item label="校区编码">{{ Moder.SchoolID }}</el-descriptions-item>
                <el-descriptions-item label="校区联系人">{{ Moder.Contact }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ Moder.EMail }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ Moder.Phone }}</el-descriptions-item>
                <el-descriptions-item label="地址" >
                  {{ Moder.Address }}
                  <el-tooltip content="显示所在位置" placement="top" v-if="showTit" >
                  <i class="el-icon-location-outline" style="float:right; cursor: pointer;font-size:18px" @click="openBaiduMap" ></i>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="备注信息">{{ Moder.Descp }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ Moder.CreateTime }}</el-descriptions-item> 
              </el-descriptions>
            </el-row>
            <el-row>
              <p class="title">设备动态信息</p>
              <el-descriptions  style="margin-top:20px" :column="3" border>
                <el-descriptions-item label="设备状态">
                  <span>
                    <span style="color:#67C23A" v-if="Moder.Status === 1" type="success">在线</span>
                    <span style="color:#F56C6C" v-if="Moder.Status !== 1" type="danger">离线</span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="今日事件">{{ Moder.TodayEventCount }}</el-descriptions-item>
                <el-descriptions-item label="设备时钟状态">
                  <span v-if="Moder.Status !== 1"></span>
                  <span v-else>
                    <span style="color:#67C23A" v-if="Moder.Statusassert < 6000" type="success">正常</span>
                    <span style="color:#F56C6C" v-else type="danger">异常</span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="最近性能上送时间">
                  <span v-if="Moder.LastReportStatusTime">{{ Moder.Status_Time }}</span>
                  <span v-else>初始化</span>
                </el-descriptions-item>
                <el-descriptions-item label="最近上下线时间" >
                  <span v-if="Moder.LastReportStatusTime&&Moder.StatusChangeTime&&Moder.StatusChangeTime_redo">
                  {{ Moder.StatusChangeTime_redo }}
                  </span> 
                </el-descriptions-item>
                <el-descriptions-item label="最近握手心跳时间" >
                  <span v-if="Moder.LastReportEchoTime">
                    {{ Moder.LastReportEchoTime }}
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="持续运行时长">{{ Moder.KeepRunningTime }}</el-descriptions-item>
                <el-descriptions-item label="公网地址">{{ Moder.FromIP }}</el-descriptions-item>
                <el-descriptions-item label="内网地址">{{ Moder.CurrentIP }}</el-descriptions-item>
                <el-descriptions-item label="资产状态">{{ Moder.OnlineDeviceCount }} / {{Moder.DeviceTotal}} </el-descriptions-item>
                <el-descriptions-item label="CPU使用率" :span="2">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="Moder.CPUUsedPert" /> 
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="设备软件版本">{{ Moder.Version }}</el-descriptions-item>
                <el-descriptions-item label="内存使用率" :span="2">
                  <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="Moder.MemUsedPct" /> 
                    </div>
                    <span style="white-space: nowrap;">{{ Moder.MemuSoftUsed }}<span v-if= Moder.MemuSoftUsed>/</span>{{ Moder.MemuSoftTotal }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="设备mac">{{ Moder.Mac }}</el-descriptions-item>
                 <el-descriptions-item label="系统磁盘使用率" :span="2">
                  <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="Moder.DiskUsedPct" /> 
                    </div>
                    <span style="white-space: nowrap;">
                      {{ Moder.DiskUsed }}<span v-if= Moder.DiskUsed>/</span>{{ Moder.DiskTotal }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="通讯SocketID">{{ Moder.ChanelID }}</el-descriptions-item>
                <!-- <el-descriptions-item label="扩展磁盘使用率" :span="2">
                  <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                    <div style="width:80%">
                      <el-progress :stroke-width="10" :percentage="Moder.DiskSoftPct" /> 
                    </div>
                    <span style="white-space: nowrap;">{{ Moder.DiskSoftUsed }}<span v-if= Moder.DiskSoftUsed>/</span>{{ Moder.DiskSoftTotal }}</span>
                  </div>
                </el-descriptions-item> -->
              </el-descriptions>
            </el-row>

          </div>
        </el-tab-pane>
        <el-tab-pane label="资产状态">
          <div class="top">
            <el-button type="primary" style="position: absolute; right: 15px; top: 15px;" @click="$router.go(-1)">返回</el-button>
          </div>
          <el-table stripe border :data="assertsForm" style="width: 100%; margin-top: 48px" >
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum_assets - 1) * pageSize_assets }'> </el-table-column>
            <el-table-column label="资产名称" prop="DeviceName"   show-overflow-tooltip>
              <template slot-scope="{row}">
                  <span>{{ row.DeviceName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="所在教室" prop="ClassName"   show-overflow-tooltip />
            <el-table-column label="资产备注" prop="UserName"   show-overflow-tooltip></el-table-column>
            <el-table-column label="操作系统" prop="DeviceClass"   show-overflow-tooltip></el-table-column>
            <el-table-column label="资产类型" prop="DeviceType"   show-overflow-tooltip></el-table-column>
            <el-table-column label="在线状态" prop="StatusChangeTime" width="180"  show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>
                  <span style="color:#67C23A" v-if="row.Status === 1" type="success">在线</span>
                  <span style="color:#F56C6C" v-if="row.Status !== 1" type="danger">离线</span>
                  <span v-if="!row.LastReportStatusTime || !row.StatusChangeTime">--初始化</span>
                  <span v-else-if="row.StatusChangeTime_redo">--{{row.StatusChangeTime_redo}}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="运行时长" prop="KeepRunningTime"   show-overflow-tooltip />
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange_assets"
            @current-change="handleCurrentChange_assets" 
            :current-page=pageNum_assets
            :page-size=pageSize_assets
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="assets_total">
          </el-pagination>
        </el-tab-pane> 
        <el-tab-pane label="今日事件">
          <div class="top">
            <el-button type="primary" style="position: absolute; right: 15px; top: 15px;" @click="$router.go(-1)">返回</el-button>
          </div>
          <el-table stripe border :data="eventTable" style="width: 100%; margin-top: 48px">
            <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.EventpageNum- 1)*this.EventpageSize}'> </el-table-column>
            <el-table-column label="资产名称" width="100" show-overflow-tooltip prop="DeviceName" >
                <template slot-scope="{row}">
                <span>{{ row.DeviceName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发生时间" show-overflow-tooltip prop="TransTime" width="160px" ></el-table-column>
            <el-table-column label="事件类型" show-overflow-tooltip prop="EventID"  width="140">
                <template slot-scope="{row}">
                {{ getEventLabel(row.EventID) }}
                </template>
            </el-table-column>
            <el-table-column label="发生事件源" show-overflow-tooltip prop="EventType" width="100" >
                <template slot-scope="{row}">
                <span v-show="row.EventType == '1'">管理中心</span>
                <span v-show="row.EventType == '2'">校区装置</span>
                <span v-show="row.EventType == '3'">终端资产</span>
                </template>
            </el-table-column>
            <el-table-column label="严重性等级" show-overflow-tooltip prop="EventLevel" width="100" >
                <template slot-scope="{row}">
                <span style="color:#F56C6C" v-show="row.EventLevel == '1'">紧急</span>
                <span style="color:#E6A23C" v-show="row.EventLevel == '2'">重要</span>
                <span style="color:#909399" v-show="row.EventLevel == '3'">默认</span>
                <span style="color:#409EFF" v-show="row.EventLevel == '4'">普通</span>
                <span style="color:#67C23A" v-show="row.EventLevel == '5'">告知</span>
                </template>
            </el-table-column>
            <el-table-column label="描述信息" show-overflow-tooltip prop="Descp" ></el-table-column>
            <el-table-column label="确认状态" show-overflow-tooltip prop="IsAck" width="100" >
                <template slot-scope="{row}">
                <span style="color:#909399" v-show="row.IsACK == '0'">未确认</span>
                <span style="color:#67C23A" v-show="row.IsACK == '1'">已确认</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="120px" fixed="right">
                <template slot="header" slot-scope="scope">
                  <el-button size="mini"  :type="!control?'info':'primary'" :disabled="!control" @click="changeMailGlobalAll(scope.row)">确认本页</el-button>
                </template> 
                <template slot-scope="scope" >
                  <el-button size="mini" :type="scope.row.IsACK?'info':'primary'"  :disabled="scope.row.IsACK != 0" @click="changeMailGlobal(scope.row)">确  认</el-button>
                </template> 
            </el-table-column>
        </el-table>
        <el-pagination 
          @size-change="handleSizeChangeEvent"
          @current-change="handleCurrentChangeEvent" 
          :current-page=EventpageNum
          :page-size=EventpageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="EventTotal">
        </el-pagination>
         </el-tab-pane>
        </el-tabs>
    </el-row>
    <!-- 百度地图组件 -->
    <baiduMap ref="baiduMap" :infoWindow='infoWindow' @getInfo="getInfo" @childToParent="handleChildData"></baiduMap>
  </div>
</template>

<script>
import { connrequest, GetEventLog } from '@/api/firstPage'
import { parseTime, getuuid, recursiveGetNodePath, recursiveGetChildNodePath,formatDuration,getNowDay,formatTime2,formatBytes_back } from '@/utils/index'
import baiduMap from "./components/baiduMap"; 

export default {
  components: {
    baiduMap
  },
  data() {
    return {
      showTit:true,
      infoWindow: {
        title: '',
        contents: '经纬度查询',
        show: true,
        lng: '',
        lat: '' ,
        address:''
      },
      Moder: {},
      activeTab:'tab1',
      assertsForm:[],
      pageNum_assets: 1,
      pageSize_assets: 10,
      assets_total:0,
      eventTable:[],
      EventpageNum: 1,
      EventpageSize: 10,
      EventTotal:0,
      eventList: [],
      formOptions: [
        {
          col: 4,
          hidden: false,
          label: "在线状态", // label文字
          prop: "Status", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择在线状态", // elementui组件属性
          options: [
            { label: '全部', value: 0 },
            { label: '在线', value: 1 },
            { label: '离线', value: 2 }
          ],
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.Status = val
            }
          }
        },
        
        {
          col: 8,
          label: "校区名称关键字", // label文字
          labelWidth:'150px',
          prop: "SchoolName", // 字段名
          element: "el-input", // 指定elementui组件
          placeholder: "请输入描述信息,支持模糊查询。", // elementui组件属性
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.SchoolName = val
            }
          }
        },
        {
          col: 4,
          hidden: false,
          label: "排序字段", // label文字
          prop: "Sort_value", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: "SchoolName", // 字段初始值,
          placeholder: "请选择排序字段", // elementui组件属性
          options: [
            { label: '校区名称', value: 'SchoolName' },
            { label: '在线状态', value: 'Status' },
            { label: '运行时长', value: 'KeepRunningTime' }
          ],
          events: {
            input(val) {
              that.searchform.Sort_value = val
            }
          }
        }
      ],
      control:false,
    }
  },
  mounted(){
    this.Moder = JSON.parse(sessionStorage.getItem('detailStatus'))
    this.Moder.StatusChangeTime_redo = parseTime(this.Moder.StatusChangeTime)
    // this.Moder = this.$route.query.Moder
  },
  methods:{
    getInfo(){
      this.$set(this.infoWindow, 'lng', this.Moder.Longitude)
      this.$set(this.infoWindow, 'lat', this.Moder.Latitude)
      this.$set(this.infoWindow, 'address', this.Moder.Address)
      // this.infoWindow.lng = this.Moder.Longitude
      // this.infoWindow.lat = this.Moder.Latitude
      // this.infoWindow.address = this.Moder.Address
    },
    handleTabClick(tab) {
        if(tab.index == 1)  this.getassertForm(this.Moder)
        if(tab.index == 2)  this.GetEventLogSchool(this.Moder)
    },
    async getassertForm(row){
      const data = {
        Paging:{
          QueryPageNo: this.pageNum_assets,
          QueryPageLength: this.pageSize_assets
        },
        Filter:{
          PrimArea: row.PrimArea,
          SecondArea: row.SecondArea,
          SchoolID: row.SchoolID,
        }
      }
      const res = await connrequest('CenterGetDevice', data)
      const currentTimeStamp = new Date().getTime();
      res.Data.map(item => {
        item.KeepRunningTime = formatDuration(item.KeepRunningTime)
        item.StatusChangeTime_redo = parseTime(item.StatusChangeTime)
        // item.StatusChangeTime_redo =currentTimeStamp/1000 > item.StatusChangeTime &&item.StatusChangeTime !=0 ? formatDuration(currentTimeStamp/1000 - item.StatusChangeTime):0
        // item.StatusChangeTime_redo = formatTime2(item.StatusChangeTime)
      })
      this.assertsForm = res.Data
      this.assets_total = res.Paging.TotalCount
    },
    async GetEventLogSchool(row){
      this.GetParamDictEvent()
      const data = {
        Paging: {
          QueryPageNo: this.EventpageNum,
          QueryPageLength: this.EventpageSize
        },
        Filter: { 
          "StartTime": getNowDay('time'),
          "EndTime": getNowDay('23:59:59'),
          // "PrimArea": row.PrimArea,
          // "SecondArea": row.SecondArea,
          "SchoolName": row.SchoolName || ''
          // "DeviceName": row.DeviceName,
        }
      }
      const res = await connrequest('GetEventLog', data)
      res.Data = res.Data || []
      this.control = false
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        if (item.IsACK === 0) {
          this.control = true
        }
        return item
      })
      this.eventTable = res.Data
      this.EventTotal = res.Paging.TotalCount
    },
    getEventLabel(eventID) {
      return this.eventList.find(item => item.value === eventID)?.label || null;
    },
    // 获取事件定义
    async GetParamDictEvent(){
      const data = {
        Paging:{
          QueryPageNo: 1,
          QueryPageLength: 100000000
        }
      }
      const res = await connrequest('GetParamDictEvent', data)
      let arr = []
      res.Data.map(item => {
        arr.push({label: item.AlarmDescp, value: item.EventID})
      })
      this.formOptions.map( item => {
        if(item.label === '事件类型'){
          item.options = arr
          item.initValue = arr[0]?.value
        }
      })
      this.eventList = arr
    },
    async changeMailGlobal(row){
      // return
      const data = {
        Data: [row.AutoID]
      }
      const res = await connrequest('ConfirmEvent', data)
      if (res.Status.StatusCode === 0) {
        this.$message.success('确认成功')
        // this.getData()
        this.GetEventLogSchool(this.Moder)
      }
    },
    async changeMailGlobalAll(){
      const arr = this.eventTable.map(item => item.AutoID);
      const data = {
        Data: arr
      }
      const res = await connrequest('ConfirmEvent', data)
      if (res.Status.StatusCode === 0) {
        this.GetEventLogSchool(this.Moder)
        this.$message.success('确认成功')
        // this.getData()
      }
    },
     handleSizeChange_assets(pageSize){
      this.pageSize_assets = pageSize
      this.pageNum_assets = 1
      this.getassertForm(this.Moder)
    },
    handleCurrentChange_assets( pageNum ){
      this.pageNum_assets = pageNum
      this.getassertForm(this.Moder)
    },
    handleSizeChangeEvent(pageSize){
      this.EventpageSize = pageSize 
      this.EventpageNum = 1
      this.GetEventLogSchool(this.Moder)
    },
    handleCurrentChangeEvent( pageNum ){
      this.EventpageNum = pageNum
      this.GetEventLogSchool(this.Moder) 
    },
    openBaiduMap(){ 
      // this.Moder.Longitude = '114.040585' 
      // this.infoWindow.lat = '22.558803'
      this.infoWindow.lng = this.Moder.Longitude
      this.infoWindow.lat = this.Moder.Latitude
      this.infoWindow.control = this.Moder.Longitude != ''?true:false
      this.infoWindow.address = this.Moder.Address
      this.showTit = false
      this.$refs.baiduMap.dialogVisible = true
    },
    handleChildData(value){
      this.showTit = value
    }
  }
  
}
</script>

<style lang="scss" scoped>
.top{
    display: flex;
    justify-content: space-between;
    align-content: center;
    .el-button{
        margin-bottom: 10px;
    }
}
::v-deep .el-progress-bar {
  width: 70%; /* 设置进度条的宽度 */
  /* 添加其他样式属性 */
}
::v-deep .el-descriptions-item__label.is-bordered-label{
  width: 200px;
}
</style>